import { Flex, Row } from 'antd';
import { Header } from 'antd/es/layout/layout';
import { useResponsive } from 'antd-style';

import { TextLogo } from '../../../../components/TextLogo/TextLogo.tsx';
import { HeaderText } from '../../../../components/typography';

import { NetworkIcon } from './components/NetworkIcon/NetworkIcon.tsx';
import { usePageMainHeaderStyles } from './styles.tsx';

import type { FC } from 'react';

interface IPageMainHeaderProps {
    chainName: string;
}

export const PageMainHeader:FC<IPageMainHeaderProps> = ({ chainName }) => {
    const { styles, cx }=usePageMainHeaderStyles();
    
    const { mobile } = useResponsive();

    return (
        <Row className={styles.headerWrapper} justify="center" align="middle">
            <Header className={cx(styles.header, { ['mobile']: mobile })}>

                <Flex justify="center" vertical className={cx({ [styles.hide]: mobile })}>
                    <TextLogo header />
                </Flex>
                <Flex justify="center" align="center" gap={8}>
                    <NetworkIcon />
                    <HeaderText>{chainName}</HeaderText>
                </Flex>

            </Header>
        </Row>
    );
};
